<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div>
			<button class="animated-button">按钮</button>
		</div>
	</body>
	<style>
		.animated-button {
		background-color: #4CAF50; /* 按钮背景颜色 */
		border: none; /* 去掉边框 */
		color: white; /* 按钮文字颜色 */
		padding: 10px 32px; /* 按钮内边距 */
		text-align: center; /* 文字居中 */
		text-decoration: none; /* 去掉下划线 */
		display: inline-block; /* 行内块元素 */
		font-size: 16px; /* 字体大小 */
		margin: 10px 2px; /* 按钮外边距 */
		cursor: pointer; /* 鼠标指针样式 */
		border-radius: 50px; /* 圆角半径 */
		overflow: hidden; /* 隐藏溢出部分 */
		position: relative; /* 相对定位 */
		}
		
		.animated-button::before {
		content: ''; /* 伪元素内容为空 */
		position: absolute; /* 绝对定位 */
		top: 50%; /* 上边距为50% */
		left: 50%; /* 左边距为50% */
		transform: translate(-50%, -50%); /* 平移 */
		width: 0; /* 宽度为0 */
		height: 0; /* 高度为0 */
		background-color: rgba(255, 255, 255, 0.5); /* 背景颜色为半透明白色 */
		border-radius: 50%; /* 圆角半径为50% */
		opacity: 0; /* 透明度为0 */
		transition: width 0.3s ease-out, height 0.3s ease-out, opacity 0.3s ease-out; /* 过渡效果 */
		}
		
		.animated-button:hover::before {
		width: 200%; /* 宽度为按钮的两倍 */
		height: 200%; /* 高度为按钮的两倍 */
		opacity: 1; /* 透明度为1 */
		}
	</style>
</html>